Search completed in 1.23 seconds.
Computed value - CSS: Cascading Style Sheets
the
computed value of a css property is the value that is transferred from parent to child during inheritance.
... doing the computation needed to reach the value described in the "
computed value" line in the property's definition table.
... the computation needed to reach a property's
computed value typically involves converting relative values (such as those in em units or percentages) to absolute values.
...And 6 more matches
Adding a new CSS property
the style system is the part of the code in gecko that is responsible for producing a
computed value for every property for every element.
... then, unless you're implementing a shorthand property, you need to decide which style struct the
computed value of the property should go in.
... (none of this applies to shorthand properties.) start by reading and understanding the "
computed value:" line in the specification's definition of the property, and any associated prose.
...And 4 more matches
Used value - CSS: Cascading Style Sheets
the used value of a css property is its value after all calculations have been performed on the
computed value.
... note: the getcomputedstyle() dom api returns the resolved value, which may either be the
computed value or the used value, depending on the property.
...`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from
computed value css 2.0 defined only
computed value as the last step in a property's calculation.
...And 3 more matches
Mozilla Style System
the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of
computed values for all css properties.
... the handling of those
computed values is the responsibility of other parts of the code.
...in one half (the backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into
computed values.
...And 2 more matches
Index - Web APIs
439 cssprimitivevalue api, cssprimitivevalue, interface, reference the cssprimitivevalue interface derives from the cssvalue interface and represents the current
computed value of a css property.
... 492 cssvalue api, cssvalue, dom, interface, needsexample, reference the cssvalue interface represents the current
computed value of a css property.
... 3777 svggeometryelement.gettotallength() api, dom, method, needsexample, reference, svg, svg dom the svggeometryelement.gettotallength() method returns the user agent's
computed value for the total length of the path in user units.
...And 2 more matches
border-style - CSS: Cascading Style Sheets
unless a background-image is set, the
computed value of the same side's border-width will be 0, even if the specified value is something else.
...unless a background-image is set, the
computed value of the same side's border-width will be 0, even if the specified value is something else.
...the radius of the dots is half the
computed value of the same side's border-width.
...it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedanimation typediscrete formal syntax <line-style>{1,4}where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples table with all property values here is an example of all th...
-ms-wrap-flow - Archive of obsolete content
initial valueautoapplies toblock-level elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values auto for floated elements, an exclusion is created; for all other elements, an exclusion is not created.
... remarks the -ms-wrap-flow property makes an element an exclusion element when it has a
computed value other than auto.
... when the -ms-wrap-flow property's
computed value is auto, the element does not become an exclusion element unless its float property's
computed value is not none.
Mozilla
the style system is the part of the code in gecko that is responsible for producing a
computed value for every property for every element.
... mozilla style system the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of
computed values for all css properties.
... the handling of those
computed values is the responsibility of other parts of the code.
Window.getComputedStyle() - Web APIs
these are usually the same as css 2.1’s
computed values, but for some older properties like width, height, or padding, they are instead the same as used values.
... originally, css 2.0 defined the
computed values as the "ready to be used" final values of properties after cascading and inheritance, but css 2.1 redefined them as pre-layout, and used values as post-layout.
... for css 2.0 properties, getcomputedstyle returns the old meaning of
computed values, now called used values.
border-image - CSS: Cascading Style Sheets
note: if the
computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead.
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image area
computed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relati...
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image area
computed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relati...
bottom - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the
computed value from its parent element (which might not be its containing block).
... this
computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing block
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed.
box-lines - CSS: Cascading Style Sheets
for calculating the height of a line, margins with a
computed value of auto should be treated as having a value of 0.
... once the number of lines has been determined, elements with a
computed value for box-flex other than 0 stretch as necessary in an attempt to fill the remaining space on the lines.
... formal definition initial valuesingleapplies tobox elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax single | multiple examples simple usage example in the original version of the spec, box-lines allowed you to specify that you wanted your flex container's children to wrap onto multiple lines.
clamp() - CSS: Cascading Style Sheets
this means that the font-size will be set at 1.2rem, unless the
computed value of 1.2vw is greater than that of 1.2rem, in which case it will be set to that value instead.
...this means that the font-size will be set at 1.8rem, until the
computed value of 2.5vw becomes greater than that of 1.8rem.
... at this point, font-size will be set at 2.5vw, until 2.5vw's
computed value becomes greater than that of 2.8rem.
float - CSS: Cascading Style Sheets
a floating element is one where the
computed value of float is not none.
... as float implies the use of the block layout, it modifies the
computed value of the display values, in some cases: specified value
computed value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet...
... formal definition initial valuenoneapplies toall elements, but has no effect if the value of display is none.inheritedno
computed valueas specifiedanimation typediscrete formal syntax left | right | none | inline-start | inline-end examples how floated elements are positioned as mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it).
left - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the
computed value from its parent element (which might not be its containing block).
... this
computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing block
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only cont...
line-height - CSS: Cascading Style Sheets
the
computed value is the same as the specified <number>.
...the
computed value is this <percentage> multiplied by the element's computed font size.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itself
computed valuefor percentage and length values, the absolute length, otherwise as specifiedanimation typeeither number or length formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; } /* length */ div { line-...
outline - CSS: Cascading Style Sheets
how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:outline-color: for the keyword invert, the
computed value is invert.
... for the color value, if the value is translucent, the
computed value will be the rgba() corresponding one.
...the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the
computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment css...
right - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the
computed value from its parent element (which might not be its containing block).
... this
computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing block
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { w...
top - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the
computed value from its parent element (which might not be its containing block).
... this
computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing block
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.
Using the CSS Typed Object Model - Web APIs
you'll notice a difference in the margin-top and margin-bottom default
computed values.
... you'll note that custom properties retain the value as written in the stylesheet, whereas computed styles will be listed as the
computed value — color was listed as an rgb() value and the font-weight returned was 700 even though we use a named color and and the bold keyword.
HTMLImageElement.x - Web APIs
the x and y properties are only valid for an image if its display property has the
computed value table-column or table-column-group.
... note: the x property is only valid if the
computed value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly on the <img> or they're inherited from a containing element or by being located within a column described by either <col> or <colgroup>.
HTMLImageElement.y - Web APIs
the x and y properties are only valid for an image if its display property has the
computed value table-column or table-column-group.
... note: the y property is only valid if the
computed value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly on the <img> or they're inherited from a containing element or by being located within a column described by either <col> or <colgroup>.
-moz-user-focus - CSS: Cascading Style Sheets
initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus.
... formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot focus on this element."> css .ignored { -moz-user-focus: ignore; } specifications not part of any standard.
-webkit-border-before - CSS: Cascading Style Sheets
mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedyespercentagesas each of the properties of the shorthand:-webkit-border-before-width: logical-width of containing block
computed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if bo...
...rder-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedcolor: if the value is translucent, the
computed value will be the rgba() corresponding one.
-webkit-mask-position-x - CSS: Cascading Style Sheets
it-mask-position-x: -50%; /* <length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itself
computed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's left padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itself
computed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-po...
-webkit-mask-position-y - CSS: Cascading Style Sheets
it-mask-position-y: -50%; /* <length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itself
computed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itself
computed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-pos...
align-content - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-line flex containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>?
... candidate recommendation initial definition initial valuenormalapplies tomulti-line flex containersinheritedno
computed valueas specifiedanimation typediscrete ...
animation-fill-mode - CSS: Cascading Style Sheets
forwards the target will retain the
computed values set by the last keyframe encountered during execution.
... formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example.
background-clip - CSS: Cascading Style Sheets
see "the backgrounds of special elements." note: for documents whose root element is an html element: if the
computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the
computed values of the background properties from that element’s first html <body> child element.
...it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is ...
block-size - CSS: Cascading Style Sheets
initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing block
computed valuesame as width and heightanimation typea length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing block
computed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-inline-end-color - CSS: Cascading Style Sheets
initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typea color values <'color'> the color of the border.
... formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-end - CSS: Cascading Style Sheets
f the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if bo...
...f the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if bo...
border-inline-start-style - CSS: Cascading Style Sheets
initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete values <'border-style'> the line style of the border.
... formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline - CSS: Cascading Style Sheets
initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is ...
... formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system...
border-top-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> ...
...it also applies to ::first-letter.inheritedno
computed valueas specifiedanimation typediscrete ...
clip-path - CSS: Cascading Style Sheets
note: a
computed value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to reference box when specified, otherwise border-box
computed valueas specified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
display - CSS: Cascading Style Sheets
short note on what css display properties do to table semantics — the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueinlineapplies toall elementsinheritedno
computed valueas the specified value, except for positioned and floating elements and the root element.
... in both cases the
computed value may be a keyword other than the one specified.animation typediscrete formal syntax [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | ruby<display-listitem> = <display-outside>?
Inheritance - CSS: Cascading Style Sheets
css properties can be categorized in two types: inherited properties, which by default are set to the
computed value of the parent element non-inherited properties, which by default are set to initial value of the property refer to any css property definition to see whether a specific property inherits by default ("inherited: yes") or not ("inherited: no").
... inherited properties when no value for an inherited property has been specified on an element, the element gets the
computed value of that property on its parent element.
<length> - CSS: Cascading Style Sheets
lh equal to the
computed value of the line-height property of the element on which it is used, converted to an absolute length.
... rlh equal to the
computed value of the line-height property on the root element (typically <html>), converted to an absolute length.
margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-m...
... initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete ...
margin-left - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position
computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-left'...
margin-right - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position
computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-r...
offset-path - CSS: Cascading Style Sheets
each shape or path must define an initial position for the
computed value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position.
... formal definition initial valuenoneapplies totransformable elementsinheritedno
computed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax none | ray( [ <angle> && <size>?
offset-rotate - CSS: Cascading Style Sheets
auto <angle> if auto is followed by an <angle>, the
computed value of the angle is added to the
computed value of auto.
... formal definition initial valueautoapplies totransformable elementsinheritedno
computed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto ...
order - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritedno
computed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block.
... candidate recommendation initial definition initial value0applies toflex items and absolutely-positioned flex container childreninheritedno
computed valueas specifiedanimation typean integer ...
outline-color - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritedno
computed valuefor the keyword invert, the
computed value is invert.
... for the color value, if the value is translucent, the
computed value will be the rgba() corresponding one.
overflow-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritedno
computed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ...
... working draft initial valueautoapplies toblock-containers, flex containers, and grid containersinheritedno
computed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete ...
overflow-wrap - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.
... working draft initial definition initial valuenormalapplies tonon-replaced inline elementsinheritedyes
computed valueas specifiedanimation typediscrete ...
overscroll-behavior-y - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation.
scrollbar-width - CSS: Cascading Style Sheets
initial valueautoapplies toscrolling boxesinheritedno
computed valueas specifiedanimation typediscrete syntax /* keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a keyword.
... mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
translate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding box
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
... initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding box
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes ...
SVG documentation index - SVG: Scalable Vector Graphics
it defaults to the baseline with the same name as the
computed value of the alignment-baseline property.
...this value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathlength/(
computed value of path length).
Table Reflow Internals - Archive of obsolete content
absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail size, various
computed values, resolved style structs possible request for preferred size and more.
-moz-binding - Archive of obsolete content
formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
-moz-stack-sizing - Archive of obsolete content
(the problem does not affect children moved above or to the left of the stack.) initial valuestretch-to-fitapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values stretch-to-fit the child will influence the stack's size.
-ms-accelerator - Archive of obsolete content
initial valuefalseapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete syntax /* the object is not a keyboard shortcut (the default) */ -ms-accelerator: false /* the object is a keyboard shortcut */ -ms-accelerator: true values false the object is not a keyboard shortcut.
-ms-content-zoom-limit - Archive of obsolete content
smaller values zoom out.
computed valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: as specified-ms-content-zoom-limit-min: as specifiedanimation typediscrete syntax the -ms-content-zoom-limit shorthand property is specified as one or both of the following content zoom limit values, in order, separated by spaces.
-ms-content-zoom-snap-points - Archive of obsolete content
initial valuesnapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values snapinterval( <percentage>, <percentage> ) specifies where the snap-points will be placed.
-ms-content-zoom-snap - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: none-ms-content-zoom-snap-points: snapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: as specified-ms-content-zoom-snap-points: as specifiedanimation typediscrete syntax the -ms-content-zoom-snap shorthand property is specified as one or both of the following content zoom snap values, in order, separated by spaces.
-ms-content-zooming - Archive of obsolete content
initial valuezoom for the top level element, none for all other elementsapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values none the initial value of all elements except the top-level element.
-ms-filter - Archive of obsolete content
initial value"" (the empty string)applies toall elementsinheritedno
computed valueas specifiedanimation typediscrete remarks the following table lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or box-sha...
-ms-high-contrast-adjust - Archive of obsolete content
initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values auto indicates the applicable css properties will be adjusted as expected when the system is in high contrast mode.
-ms-hyphenate-limit-chars - Archive of obsolete content
initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values auto corresponds to a value of 5 2 2, indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break.
-ms-hyphenate-limit-lines - Archive of obsolete content
initial valueno-limitapplies toblock container elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values no-limit indicates that hyphenation is not limited based on the number of consecutive hyphenated lines.
-ms-hyphenate-limit-zone - Archive of obsolete content
initial value0applies toblock container elementsinheritedyespercentagescalculated with respect to the width of the line box
computed valueas specifiedanimation typediscrete syntax values <percentage> an integer followed by a percent sign (%), which specifies the width of the hyphenation zone, calculated with respect to the line box.
-ms-ime-align - Archive of obsolete content
initial valueautoapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete syntax /* keyword values */ -ms-ime-align: auto; -ms-ime-align: after; values auto initial value.
-ms-overflow-style - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values auto the initial value.
-ms-scroll-chaining - Archive of obsolete content
initial valuechainedapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values chained initial value.
-ms-scroll-limit-x-max - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values auto the maximum value for the scrollleft property is equal to element.scrollwidth.
-ms-scroll-limit-x-min - Archive of obsolete content
initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values <length> the minimum value for the scrollleft property.
-ms-scroll-limit-y-max - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values auto the maximum value for the scrolltop property is equal to element.scrollheight.
-ms-scroll-limit-y-min - Archive of obsolete content
initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values <length> the minimum value for the scrolltop property.
-ms-scroll-limit - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-scroll-limit-x-min: 0-ms-scroll-limit-y-min: 0-ms-scroll-limit-x-max: auto-ms-scroll-limit-y-max: autoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas each of the properties of the shorthand:-ms-scroll-limit-x-min: as specified-ms-scroll-limit-y-min: as specified-ms-scroll-limit-x-max: as specified-ms-scroll-limit-y-max: as specifiedanimation typediscrete syntax the -ms-scroll-limit property is specified as one or more of the following scroll limit values, in the order listed, separated by spaces.
-ms-scroll-rails - Archive of obsolete content
initial valuerailedapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values none the content moves exactly with the user's finger.
-ms-scroll-snap-points-x - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
-ms-scroll-snap-points-y - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
-ms-scroll-snap-x - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-x: snapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-x: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-x shorthand property is specified as one or both of the following values, in order and separated by spaces.
-ms-scroll-snap-y - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-y: snapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-y: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-y shorthand property is specified as one or both of the following values, in order and separated by spaces.
-ms-scroll-translation - Archive of obsolete content
initial valuenoneapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values vertical-to-horizontal vertical to horizontal translation, as described in remarks, will take place when appropriate.
-ms-scrollbar-3dlight-color - Archive of obsolete content
initial valuedepends on user agentapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values <color> the color of the top and left edges of the scroll box and scroll arrows of the scroll bar.
-ms-scrollbar-highlight-color - Archive of obsolete content
initial valuethreedhighlightapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values <color> the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
-ms-scrollbar-shadow-color - Archive of obsolete content
initial valuethreeddarkshadowapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete syntax values <color> the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
-ms-wrap-through - Archive of obsolete content
initial valuewrapapplies toblock-level elementsinheritedno
computed valueas specifiedanimation typediscrete syntax values wrap the exclusion element inherits its parent node's wrapping context.
azimuth - Archive of obsolete content
initial valuecenterapplies toall elementsinheritedyes
computed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -360deg to 360deg.
Styling web forms - Learn web development
to make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size: 100%; } the inherit property value causes the property value to match the
computed value of the property of its parent element; inheriting the value of the parent.
-moz-window-dragging
<window>, <panel> inherited no media visual
computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below.
overflow-clip-box
initial valuepadding-boxapplies toall elementsinheritednomediavisual
computed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this keyword makes the clipping be related to the padding box.
UI Tour - Firefox Developer Tools
computed view the computed view shows you the complete computed css for the selected element (the
computed values are the same as what getcomputedstyle would return.): compatibility view starting with firefox developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole.
Attr.namespaceURI - Web APIs
if (attribute.localname == "value" && attribute.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a
computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
CSSPrimitiveValue - Web APIs
the cssprimitivevalue interface derives from the cssvalue interface and represents the current
computed value of a css property.
CSSValue - Web APIs
the cssvalue interface represents the current
computed value of a css property.
A basic ray-caster - Web APIs
the code does attempt to be very efficient, using array look-ups of pre-
computed values, but i'm no optimization guru, so things could probably be written faster.
Element.namespaceURI - Web APIs
if (element.localname == "browser" && element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a
computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Node.namespaceURI - Web APIs
if (node.localname == "browser" && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a
computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
SVGGeometryElement - Web APIs
svggeometryelement.gettotallength() returns the user agent's
computed value for the total length of the path in user units.
SVGGraphicsElement - Web APIs
svggraphicselement.transform read only an svganimatedtransformlist reflecting the
computed value of the transform property and its corresponding transform attribute of the given element.
SVGPathElement - Web APIs
svgpathelement.gettotallength() returns a float representing the
computed value for the total length of the path using the browser's distance-along-a-path algorithm, as a distance in the current user coordinate system.
The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual
computed value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
Window - Web APIs
computed style indicates the
computed values of all css properties of the element.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
initial valuesee proseapplies toall elementsinheritedyes
computed valueas specified with variables substitutedanimation typediscrete syntax --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); <declaration-value> this value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token.
-moz-context-properties - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element.
-moz-float-edge - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications not par...
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
formal definition initial value0applies toimagesinheritedno
computed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz...
-moz-image-region - CSS: Cascading Style Sheets
it will not work with xul <image src="url" />.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area to the ri...
-moz-orient - CSS: Cascading Style Sheets
formal definition initial valueinlineapplies toany element; it has an effect on progress and meter, but not on <input type="range"> or other elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax inline | block | horizontal | vertical examples html <p> the following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> the following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress> css .vert { -moz-orient: vertical; width: 16px; height: 150px...
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border box
computed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border box
computed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are vi...
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border box
computed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topright - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border box
computed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing ...
-moz-outline-radius - CSS: Cascading Style Sheets
itednopercentagesas each of the properties of the shorthand:-moz-outline-radius-topleft: refer to the corresponding dimension of the border box-moz-outline-radius-topright: refer to the corresponding dimension of the border box-moz-outline-radius-bottomright: refer to the corresponding dimension of the border box-moz-outline-radius-bottomleft: refer to the corresponding dimension of the border box
computed valueas each of the properties of the shorthand:-moz-outline-radius-topleft: as specified-moz-outline-radius-topright: as specified-moz-outline-radius-bottomright: as specified-moz-outline-radius-bottomleft: as specifiedanimation typeas each of the properties of the shorthand:-moz-outline-radius-topleft: a length, percentage or calc();-moz-outline-radius-topright: a length, percentage or calc();-moz-ou...
-moz-user-input - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | none | enabled | disabled examples disabling user input for an element input.example { /* the user will be able to select the text, but not change it.
-webkit-line-clamp - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax none | <integer> examples truncating a paragraph html <p> in this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
-webkit-mask-attachment - CSS: Cascading Style Sheets
formal definition initial valuescrollapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no media: visual
computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
-webkit-mask-composite - CSS: Cascading Style Sheets
formal definition initial valuesource-overapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor examples compositing with xor .example { -webkit-mask-image: url(mask1.png), url('mask2.png'); -webkit-mask-composite: xor, source-over; } specificatio...
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-style> for...
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritedno
computed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask images you...
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not.
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
formal definition initial valueblackapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-fill-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyes
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-stroke-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyes
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-stroke-width - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedyes
computed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">...
-webkit-text-stroke - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:-webkit-text-stroke-width: 0-webkit-text-stroke-color: currentcolorapplies toall elementsinheritedyes
computed valueas each of the properties of the shorthand:-webkit-text-stroke-width: absolute <length>-webkit-text-stroke-color: computed coloranimation typeas each of the properties of the shorthand:-webkit-text-stroke-width: discrete-webkit-text-stroke-color: a color formal syntax <length> | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <depreca...
-webkit-touch-callout - CSS: Cascading Style Sheets
formal definition initial valuedefaultapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax default | none examples turn off touch callout .example { -webkit-touch-callout: none; } specifications not part of any standard.
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/a
computed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
fallback - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuedecimal
computed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallbac...
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minus
computed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""
computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
prefix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"" (the empty string)
computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
range - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valueauto
computed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\25a0" "\25a1"; range: 2 4, 7 9...
speak-as - CSS: Cascading Style Sheets
let's talk about speech css | css tricks formal definition related at-rule@counter-styleinitial valueauto
computed valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols: ; suffix: "...
suffix - CSS: Cascading Style Sheets
" (full stop followed by a space)
computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/a
computed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
system - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuesymbolic
computed valueas specified formal syntax cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>?
font-display - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueauto
computed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification status ...
font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)
computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.
font-stretch - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormal
computed valueas specified formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting a percentage range for font-stretch the following find a local open sans font or import it, and allow using the font for normal, semi-condensed...
font-style - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormal
computed valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially s...
font-variation-settings - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormal
computed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment css fo...
font-weight - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormal
computed valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the following finds a local open sans font or import ...
src - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)
computed valueas specified formal syntax [ <url> [ format( <string># ) ]?
unicode-range - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueu+0-10ffff
computed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font.
bleed - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueauto
computed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification.
marks - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valuenone
computed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueauto
computed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment css p...
height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
computed valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } spe...
max-height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewport
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status ...
max-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewport
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status ...
max-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itself
computed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewport
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status ...
min-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewport
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status ...
min-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itself
computed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in that specification.
orientation - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding box
computed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding box
computed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
viewport-fit - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueauto
computed valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing block
computed valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute lengthmax-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifi...
zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itself
computed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" descriptor' in that specification.
CSS reference - CSS: Cascading Style Sheets
concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types values actual value
computed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmlelement.s...
align-items - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | [ <overflow-position>?
align-self - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, grid items, and absolutely-positioned boxesinheritedno
computed valueauto computes to itself on absolutely-positioned elements, and to the
computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent.
all - CSS: Cascading Style Sheets
formal definition initial valuethere is no practical initial value for it.applies toall elementsinheritedno
computed valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction) formal syntax initial | inherit | unset | revert examples html <blockquote id="quote"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
animation-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples.
animation-direction - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples.
animation-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples.
animation-iteration-count - CSS: Cascading Style Sheets
formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <single-animation-iteration-count>#where <single-animation-iteration-count> = infinite | <number> examples see css animations for examples.
animation-name - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ none | <keyframes-name> ]#where <keyframes-name> = <custom-ident> | <string> examples see css animations for examples.
animation-play-state - CSS: Cascading Style Sheets
formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <single-animation-play-state>#where <single-animation-play-state> = running | paused examples see css animations for examples.
animation-timing-function - CSS: Cascading Style Sheets
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform t...
animation - CSS: Cascading Style Sheets
ccess criterion 2.2.2 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimation-duration: 0sanimation-timing-function: easeanimation-delay: 0sanimation-iteration-count: 1animation-direction: normalanimation-fill-mode: noneanimation-play-state: runningapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas each of the properties of the shorthand:animation-name: as specifiedanimation-duration: as specifiedanimation-timing-function: as specifiedanimation-delay: as specifiedanimation-direction: as specifiedanimation-iteration-count: as specifiedanimation-fill-mode: as specifiedanimation-play-state: as specifiedanimation typediscrete formal syntax <single-animation>#where <single-animation> = <time...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-button; } ...
aspect-ratio - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes.
backdrop-filter - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-perc...
backface-visibility - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies totransformable elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax visible | hidden examples cube with transparent and opaque faces this example shows a cube with transparent faces, and one with opaque faces.
background-attachment - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.
background-blend-mode - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</o...
background-color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
background-image - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <bg-image>#where <bg-image> = none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
background-origin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); back...
background-position-x - CSS: Cascading Style Sheets
formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background image
computed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]?
background-position-y - CSS: Cascading Style Sheets
formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background image
computed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
background-position - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
computed valuea list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentageanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-position>#where <bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | rig...
background-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valuea list, each item consisting of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div>...
background-size - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning area
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples please see scaling background images for examples.
background - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesas each of the properties of the shorthand:background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning area
computed valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, but with relative lengths converted into absolute leng...
<basic-shape> - CSS: Cascading Style Sheets
description
computed values of basic shapes the values in a <basic-shape> function are computed as specified, with these exceptions: omitted values are included and compute to their defaults.
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specific...
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications spec...
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications sp...
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; }...
border-block-end - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-block-end-color: a colorborder-block-end-style: discreteborder-block-end-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | ...
border-block-start-color - CSS: Cascading Style Sheets
values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications sp...
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications ...
border-block-start - CSS: Cascading Style Sheets
f the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if bo...
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specif...
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } re...
border-block - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system...
border-bottom-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
border-bottom-left-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
border-bottom-right-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
border-bottom-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> ...
border-bottom-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuethe absolute length or 0 if border-bottom-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bot...
border-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-bottom-style: as specifiedborder-bottom-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-bottom-style: discreteborder-bottom-width: a length formal syntax <line-width> | <line-style> | <color>where ...
border-collapse - CSS: Cascading Style Sheets
formal definition initial valueseparateapplies totable and inline-table elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax collapse | separate examples a colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td...
border-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-bottom-color: computed colorborder-left-color: computed colorborder-right-color: computed colorborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color formal syntax <color>{1,4}where <color> = <rgb()> | <rgba...
border-end-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } ...
border-end-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exam...
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby
computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image...
border-image-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="borde...
border-image-slice - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border image
computed valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby
computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <div> with a border image set on it.
border-image-source - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
border-image-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image area
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby
computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by...
border-inline-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications s...
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment ...
border-inline-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status comment ...
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications s...
border-inline-start - CSS: Cascading Style Sheets
f the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if bo...
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comme...
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing block
computed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications sp...
border-left-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-left-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> ...
border-left-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuethe absolute length or 0 if border-left-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2e...
border-left - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-left-style: as specifiedborder-left-color: computed coloranimation typeas each of the properties of the shorthand:border-left-color: a colorborder-left-style: discreteborder-left-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> =...
border-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valueas each of the properties of the shorthand:border-bottom-left-radius: two absolute <length>s or <percentage>sborder-bottom-right-radius: two absolute <length>s or <percentage>sborder-top-left-radius: two absolute <length>s or <percentage>sborder-top-right-radius: two absolute <length>s or <percentage>sanimation typeas each of the properties of the shorthand:border-top-left-radius: a length, percen...
border-right-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-right-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">...
border-right-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuethe absolute length or 0 if border-right-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width:...
border-right - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-right-style: as specifiedborder-right-color: computed coloranimation typeas each of the properties of the shorthand:border-right-color: a colorborder-right-style: discreteborder-right-width: a length formal syntax <line-width> | <line-style> | <color>where <line-w...
border-start-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exam...
border-start-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .ex...
border-top-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-top-left-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of ellipse is used as the border div { border-top-left-radius: 40px 40px; } an arc of ellipse is used as the border...
border-top-right-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border box
computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of circle is used as the border div { border-top-right-radius: 40px 40px; } an arc of ellipse is used as the border...
border-top-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specificatio...
border-top - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-top-color: a colorborder-top-style: discreteborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <lengt...
border-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas each of ...
border - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if bo...
box-align - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toelements with a css display value of box or inline-boxinheritedno
computed valueas specifiedanimation typediscrete formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the...
box-decoration-break - CSS: Cascading Style Sheets
formal definition initial valuesliceapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; ...
box-direction - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; /* as specified */ } specifications not part of any standard.
box-flex-group - CSS: Cascading Style Sheets
formal definition initial value1applies toin-flow children of box elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <integer> examples simple usage example in the original flexbox spec, box-flex-group could be used to assign flex children to different groups to distribute flexible space between: article:nth-child(1) { -webkit-box-flex-group: 1; } article:nth-child(2) { -webkit-box-flex-group: 2; } this was only ever supported in webkit-based browsers,...
box-flex - CSS: Cascading Style Sheets
formal definition initial value0applies toelements that are direct children of an element with a css display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-boxinheritedno
computed valueas specifiedanimation typediscrete formal syntax <number> examples setting box-flex <!doctype html> <html> <head> <title>-moz-box-flex example</title> <style> div.example { display: -moz-box; display: -webkit-box; border: 1px solid black; width: 100%; } div.example > p:nth-child(1) { -moz-box-flex: 1; /* mozilla */ ...
box-ordinal-group - CSS: Cascading Style Sheets
formal definition initial value1applies tochildren of box elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <integer> examples basic usage example in an older version of the spec, box-ordinal-group was included to allow you to change the display order of flex children inside a flex container: article:nth-child(1) { -webkit-box-ordinal-group: 2 -moz-box-ordinal-group: 2 box-ordinal-group: 2 } article:nth-child(2) { -webkit-box-ordinal-group:...
box-orient - CSS: Cascading Style Sheets
formal definition initial valueinline-axis (horizontal in xul)applies toelements with a css display value of box or inline-boxinheritedno
computed valueas specifiedanimation typediscrete formal syntax horizontal | vertical | inline-axis | block-axis | inherit examples setting horizontal box orientation here, he box-orient property will cause the two <p> sections in the example to display in the same line.
box-pack - CSS: Cascading Style Sheets
formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritedno
computed valueas specifiedanimation typediscrete formal syntax start | center | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show the contents are centered horizontally */ widt...
box-shadow - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritedno
computed valueany length made absolute; any specified color computed; otherwise as specifiedanimation typea shadow list formal syntax none | <shadow>#where <shadow> = inset?
box-sizing - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elements that accept width or heightinheritedno
computed valueas specifiedanimation typediscrete formal syntax content-box | border-box examples box sizes with content-box and border-box this example shows how different box-sizing values alter the rendered size of two otherwise identical elements.
break-after - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of <h2>s and paragraphs laid out in multiple col...
break-before - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of <h2>s and paragraphs laid out in multiple col...
break-inside - CSS: Cascading Style Sheets
a subset of values should be aliased as follows: page-break-inside break-inside auto auto avoid avoid formal definition initial valueautoapplies toblock-level elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | avoid | avoid-page | avoid-column | avoid-region examples avoiding breaking inside a figure in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of paragraphs laid out in multiple columns using column-width: 200px.
caption-side - CSS: Cascading Style Sheets
formal definition initial valuetopapplies totable-caption elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax top | bottom | block-start | block-end | inline-start | inline-end examples setting captions above and below html <table class="top"> <caption>caption above the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> <br> <table class="bottom"> <caption>caption below the table</caption> <tr> <td>s...
caret-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueauto is computed as specified and <color> values are computed as defined for the color property.animation typea color formal syntax auto | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
clear - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toblock-level elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | left | right | both | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
clip - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toabsolutely positioned elementsinheritedno
computed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle,...
color-adjust - CSS: Cascading Style Sheets
formal definition initial valueeconomyapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax economy | exact examples preserving low contrast in this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text.
color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueif the value is translucent, the
computed value will be the rgba() corresponding one.
column-count - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritedno
computed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property.
column-fill - CSS: Cascading Style Sheets
formal definition initial valuebalanceapplies tomulticol elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content area
computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; co...
column-rule-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies tomulticol elementsinheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
column-rule-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tomulticol elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'border-style'> examples setting a dashed column rule html <p>this is a bunch of text split into three columns.
column-rule-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies tomulticol elementsinheritedno
computed valuethe absolute length; 0 if the column-rule-style is none or hiddenanimation typea length formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns.
column-rule - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-rule-width: mediumcolumn-rule-style: nonecolumn-rule-color: currentcolorapplies tomulticol elementsinheritedno
computed valueas each of the properties of the shorthand:column-rule-color: computed colorcolumn-rule-style: as specifiedcolumn-rule-width: the absolute length; 0 if the column-rule-style is none or hiddenanimation typeas each of the properties of the shorthand:column-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a length formal syntax <'column-rule-width'> | <'column-rule-style'> | <'colum...
column-span - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toin-flow block-level elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | all examples making a heading span columns in this example, the heading is made to span across all the columns of the article.
column-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritedno
computed valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
columns - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-width: autocolumn-count: autoapplies toblock containers except table wrapper boxesinheritedno
computed valueas each of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three columns usi...
contain - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> ...
content - CSS: Cascading Style Sheets
accessibility support for css generated content – tink explanation of wcag, guideline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritedno
computed valueon elements, always computes to normal.
cursor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax [ [ <url> [ <x> <y> ]?
direction - CSS: Cascading Style Sheets
formal definition initial valueltrapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification.
empty-cells - CSS: Cascading Style Sheets
formal definition initial valueshowapplies totable-cell elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax show | hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css .table_...
filter - CSS: Cascading Style Sheets
, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-perc...
flex-basis - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main size
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4:...
flex-direction - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </div> <h4>t...
flex-flow - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-direction: rowflex-wrap: nowrapapplies toflex containersinheritedno
computed valueas each of the properties of the shorthand:flex-direction: as specifiedflex-wrap: as specifiedanimation typediscrete formal syntax <'flex-direction'> | <'flex-wrap'> examples setting column-reverse and wrap element { /* main-axis is the block direction with reversed main-start and main-end.
flex-grow - CSS: Cascading Style Sheets
formal definition initial value0applies toflex items, including in-flow pseudo-elementsinheritedno
computed valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 .
flex-shrink - CSS: Cascading Style Sheets
formal definition initial value1applies toflex items, including in-flow pseudo-elementsinheritedno
computed valueas specifiedanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set.
flex-wrap - CSS: Cascading Style Sheets
formal definition initial valuenowrapapplies toflex containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax nowrap | wrap | wrap-reverse examples setting flex container wrap values html <h4>this is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <di...
flex - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritedno
computed valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrink'>?
font-family - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace examples some common font families .serif { font-family: times, times new roman, georgia, serif; } .sansserif { font-family: verdana, arial, helvetica, sans-serif; } .monospace { font...
font-feature-settings - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | <feature-tag-value>#where <feature-tag-value> = <string> [ <integer> | on | off ]?
font-kerning - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <div id="kern"></div> <div id="nokern"></div> <textarea id="input">av t.
font-language-override - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification...
font-optical-sizing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically sized.
font-size-adjust - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same as...
font-size - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the parent element's font size
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <absolute-size> | <relative-size> | <length-percentage>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large<relative-size> = larger | smaller<length-percentage> = <length> | <percentage> examples setting font sizes css .small { font-siz...
font-smooth - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | never | always | <absolute-size> | <length>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on font-smoothing on macos.
font-stretch - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typea font stretch formal syntax <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting font stretch percentages note that this example will only work in browsers that support <percentage> values.
font-style - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | italic | oblique <angle>?
font-synthesis - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | [ weight | style ] examples disabling font synthesis html <em class="syn">synthesize me!
font-variant-alternates - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | [ stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) ]where <feature-value-name> = <custom-ident> examples html <p>firefox rocks!</p> <p class="varia...
font-variant-caps - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-var...
font-variant-east-asian - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other ...
font-variant-ligatures - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatu...
font-variant-numeric - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | [ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric f...
font-variant-position - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications...
font-variant - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values> | stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-val...
font-variation-settings - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typea transform formal syntax normal | [ <string> <number> ]# examples you can find a number of other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org.
font-weight - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valuethe keyword or the numerical value as specified, with bolder and lighter transformed to the real valueanimation typea font weight formal syntax <font-weight-absolute> | bolder | lighterwhere <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single com...
font - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesas each of the properties of the shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itself
computed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as spe...
gap (grid-gap) - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:row-gap: normalcolumn-gap: normalapplies tomulti-column elements, flex containers, grid containersinheritedno
computed valueas each of the properties of the shorthand:row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentag...
grid-area - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-column-start: autogrid-row-end: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-column-start: as specifiedgrid-row-end: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]{0,3}where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-auto-columns - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content area
computed valuethe percentage as specified or the absolute lengthanimation typediscrete formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | au...
grid-auto-flow - CSS: Cascading Style Sheets
formal definition initial valuerowapplies togrid containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option...
grid-auto-rows - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content area
computed valuethe percentage as specified or the absolute lengthanimation typediscrete formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | au...
grid-column-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-column-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-column - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-column-start: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas each of the properties of the shorthand:grid-column-start: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-row-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritedno
computed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-row-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-template-areas - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" ...
grid-template-columns - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content area
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
grid-template-rows - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content area
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
grid-template - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content area
computed valueas each of the properties of the shorthand:grid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>?
grid - CSS: Cascading Style Sheets
p: normalrow-gap: normalapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-rows: refer to corresponding dimension of the content areagrid-template-columns: refer to corresponding dimension of the content areagrid-auto-rows: refer to corresponding dimension of the content areagrid-auto-columns: refer to corresponding dimension of the content area
computed valueas each of the properties of the shorthand:grid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedgrid-auto-rows: the percentage as specified or the absolute lengthgrid-auto-columns: the percentage as specified or the absolute lengthgrid...
hanging-punctuation - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | [ first | [ force-end | allow-end ] | last ] examples setting opening and closing quotes to hang html <p>“lorem ipsum dolor sit amet, consectetur adipiscing elit.
height - CSS: Cascading Style Sheets
a percentage height on the root element is relative to the initial containing block.
computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <...
hyphens - CSS: Cascading Style Sheets
formal definition initial valuemanualapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | manual | auto examples specifying text hyphenation this example uses three classes, one for each possible configuration of the hyphens property.
image-orientation - CSS: Cascading Style Sheets
formal definition initial value0degapplies toall elementsinheritedyes
computed valuean <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turnanimation typediscrete formal syntax from-image | <angle> | [ <angle>?
image-rendering - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | crisp-edges | pixelated examples setting image scaling algorithms in practical use, the pixelated and crisp-edges rules can be combined to provide some fallback for each other.
ime-mode - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totext fieldsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a form field.
initial-letter-align - CSS: Cascading Style Sheets
formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alphabetic</p> <p class="hanging">initial letter - hanging</p> <p class="ideographic">initial letter - ideographic</p> css .auto { -webkit-initial-letter-align: auto; initi...
initial-letter - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | [ <number> <integer>?
inline-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing block
computed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and va...
inset-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative...
inset-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relati...
inset-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; po...
inset-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative...
inset-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relat...
inset-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; p...
inset - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing block
computed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-...
isolation - CSS: Cascading Style Sheets
in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px;...
justify-content - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toflex containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | <content-distribution> | <overflow-position>?
justify-items - CSS: Cascading Style Sheets
formal definition initial valuelegacyapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | <overflow-position>?
justify-self - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>?
letter-spacing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valuean optimum value consisting of either an absolute length or the keyword normalanimation typea length formal syntax normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing...
line-break - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | loose | normal | strict | anywhere examples setting text wrapping see whether the text is wrapped before "々", "ぁ" and "。".
line-height-step - CSS: Cascading Style Sheets
formal definition initial value0applies toblock containersinheritedyes
computed valueabsolute <length>animation typediscrete formal syntax <length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit.
list-style-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tolist itemsinheritedyes
computed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the defin...
list-style-position - CSS: Cascading Style Sheets
formal definition initial valueoutsideapplies tolist itemsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax inside | outside examples setting list item position html <ul class="inside">list 1 <li>list item 1-1</li> <li>list item 1-2</li> <li>list item 1-3</li> <li>list item 1-4</li> </ul> <ul class="outside">list 2 <li>list item 2-1</li> <li>list item 2-2</li> <li>list item 2-3</li> <li>list item 2-4</li> </ul> <ul class="inside-img"...
list-style-type - CSS: Cascading Style Sheets
ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuediscapplies tolist itemsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax <counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples setting list item markers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li...
list-style - CSS: Cascading Style Sheets
li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyes
computed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2</li> ...
margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl;...
margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-l...
margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mo...
margin-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { ...
margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr...
margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout model
computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-...
margin-top - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe defi...
margin-trim - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background...
margin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as specified or the absolute lengthmargin-top: the percentage as specified or the absolute lengthanimation typea length ...
mask-border-mode - CSS: Cascading Style Sheets
formal definition initial valuealphaapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere.
mask-border-outset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-repeat - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-slice - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border image
computed valueas specifiedanimation typediscrete formal syntax <number-percentage>{1,4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-source - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
mask-border-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image area
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border - CSS: Cascading Style Sheets
order-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image area
computed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengthsanimation type...
mask-clip - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #...
mask-composite - CSS: Cascading Style Sheets
formal definition initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/sta...
mask-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>where <image()> = image( <image-tags>?
mask-mode - CSS: Cascading Style Sheets
formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="m...
mask-origin - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; paddin...
mask-position - CSS: Cascading Style Sheets
formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)
computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top |...
mask-repeat - CSS: Cascading Style Sheets
formal definition initial valueno-repeatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mas...
mask-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritedno
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; backgroun...
mask-type - CSS: Cascading Style Sheets
formal definition initial valueluminanceapplies to<mask> elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=...
mask - CSS: Cascading Style Sheets
ask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)
computed valueas each of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: a...
max-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing block
computed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max-block-size with horizontal and vertical text in this example, the same text (the opening sentences from herman melville's novel moby-dick) is presented in both the horizontal-tb and vertical-rl writing modes.
max-height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
computed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specificat...
max-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing block
computed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment ...
max-width - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max width in pixels in this example, the "child" will be either 150 pixels wide or the width of the "parent," which...
min-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing block
computed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment ...
min-height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.
computed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting min-height table { min-height: 75%; } form { min-height: 0; } specifications specification status commen...
min-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing block
computed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status ...
min-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status ...
mix-blend-mode - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritedno
computed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note"...
object-fit - CSS: Cascading Style Sheets
formal definition initial valuefillapplies toreplaced elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-...
object-position - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itself
computed valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset-anchor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrelativetowidthandheight
computed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset-distance - CSS: Cascading Style Sheets
formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path length
computed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-distance property.
offset-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblock
computed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheight
computed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset-position: a positionoffset-...
opacity - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritedno
computed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: ...
orphans - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax <integer> examples setting a minimum orphan size of three lines html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
outline-offset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification st...
outline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g.
outline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritedno
computed valuean absolute length; if the keyword none is specified, the
computed value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1...
Guide to scroll anchoring - CSS: Cascading Style Sheets
these suppression triggers are changes to the
computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring.
overflow-anchor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | none examples prevent scroll anchoring to prevent scroll anchoring in a document, use the overflow-anchor property.
overflow-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritedno
computed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwx...
overflow-x - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritedno
computed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> ...
overflow-y - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritedno
computed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behavior html <ul> <li><code>overflow-y:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetu...
overflow - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritedno
computed valueas each of the properties of the shorthand:overflow-x: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipoverflow-y: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax [ visible | hidd...
overscroll-behavior-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing block overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing inline overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-x - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.
overscroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing block
computed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specific...
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing block
computed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications ...
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing block
computed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications ...
padding-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing block
computed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specifi...
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing block
computed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications spe...
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing block
computed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications ...
padding-left - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.
padding - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing block
computed valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding ...
page-break-after - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples setting a page break after footnotes /* move to a new page after footnotes */ div.footnotes { page-break-after: always; } specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that ...
page-break-before - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples avoid a page break before the dic /* avoid page break before the div */ div.note { page-break-before: avoid; } specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that specifica...
page-break-inside - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p>...
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-...
perspective-origin - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding box
computed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
perspective - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritedno
computed valuethe absolute length or noneanimation typea lengthcreates stacking contextyes formal syntax none | <length> examples setting perspective this example shows a cube with the perspective set at different positions.
place-content - CSS: Cascading Style Sheets
d size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container formal definition initial valuenormalapplies tomulti-line flex containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax <'align-content'> <'justify-content'>?
place-items - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>?
place-self - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:align-self: autojustify-self: autoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritedno
computed valueas each of the properties of the shorthand:align-self: auto computes to itself on absolutely-positioned elements, and to the
computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent.
pointer-events - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit examples disabling pointer events on all images this example disables pointer events (clicking, dragging, hovering, etc.) on all images.
position - CSS: Cascading Style Sheets
formal definition initial valuestaticapplies toall elementsinheritedno
computed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax static | relative | absolute | sticky | fixed examples relative positioning relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements.
quotes - CSS: Cascading Style Sheets
formal definition initial valuedepends on user agentapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | auto | [ <string> <string> ]+ examples basic quote marks html <q>to be or not to be.
resize - CSS: Cascading Style Sheets
resize does not apply to the following: inline elements block elements for which the overflow property is set to visible formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
rotate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritedno
computed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; ...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content area
computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #fle...
ruby-align - CSS: Cascading Style Sheets
formal definition initial valuespace-aroundapplies toruby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyes
computed valueas specifiedanimation typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: start; } result ruby aligned at the center of the base text html <ruby> <rb>this is a long text to check<...
ruby-position - CSS: Cascading Style Sheets
formal definition initial valueoverapplies toruby annotations containersinheritedyes
computed valueas specifiedanimation typediscrete formal syntax over | under | inter-character examples ruby positioned over the text html <ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> css ruby { ruby-position:over; } result ruby positioned under the text html <ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> c...
scale - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritedno
computed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px...
scroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline...
scroll-margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-end' in that specification.
scroll-margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification.
scroll-margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length>{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block' in that specification.
scroll-margin-bottom - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-bottom' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-left - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.
scroll-margin-right - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-right' in that specification.
scroll-margin-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-top' in that specification.
scroll-margin - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedno
computed valueas specifiedanimation typeby
computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-padding-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-start' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-start' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.
scroll-padding-right - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-top' in that specification.
scroll-padding - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollport
computed valueas specifiedanimation typeby
computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding' in that specification.
scroll-snap-align - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ none | start | end | center ]{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-align' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border box
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax none | <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll container
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
scroll-snap-points-x - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll container
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowra...
scroll-snap-points-y - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll container
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; ...
scroll-snap-stop - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances.
scroll-snap-type-x - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | mandatory | proximity specifications not part of any standard.
scroll-snap-type-y - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | mandatory | proximity specifications not part of any standard.
scroll-snap-type - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
scrollbar-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyes
computed valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritedno
computed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image.
shape-margin - CSS: Cascading Style Sheets
formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing block
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the ec...
shape-outside - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tofloatsinheritedno
computed valueas defined for <basic-shape> (with <shape-box> following, if supplied), the <image> with its uri made absolute, otherwise as specified.animation typeyes, as specified for <basic-shape>, otherwise no formal syntax none | <shape-box> | <basic-shape> | <image>where <shape-box> = <box> | margin-box<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><image> = <url> | <image()...
tab-size - CSS: Cascading Style Sheets
formal definition initial value8applies toblock containersinheritedyes
computed valuethe specified integer or an absolute lengthanimation typea length formal syntax <integer> | <length> examples expanding by character count pre { tab-size: 4; /* set tab size to 4 characters wide */ } collapse tabs pre { tab-size: 0; /* remove indentation */ } comparing to the default size this example compares a default tab size with a custom tab size.
table-layout - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totable and inline-table elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | fixed examples fixed-width tables with text-overflow this example uses a fixed table layout, combined with the width property, to restrict the table's width.
text-align-last - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containersinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | start | end | left | right | center | justify examples justifying the last line <p>integer elementum massa at nulla placerat varius.
text-align - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | understanding wcag 2.0 formal definition initial valuestart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.applies toblock containersinheritedyes
computed valueas specified, except for the match-parent value which is calculated against its parent's direction value and results in a
computed value of either left or rightanimation typediscrete formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer elementum massa at nulla placerat varius.
text-combine-upright - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tonon-replaced inline elementsinheritedyes
computed valuespecified keyword, plus integer if 'digits'animation typediscrete formal syntax none | all | [ digits <integer>?
text-decoration-color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
text-decoration-line - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax none | [ underline | overline | line-through | blink ] | spelling-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-...
text-decoration-skip-ink - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | all | none examples html <p>you should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> ...
text-decoration-skip - CSS: Cascading Style Sheets
formal definition initial valueobjectsapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p> css p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; } result specifications specification status comment ...
text-decoration-style - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas specifiedanimation typediscrete formal syntax solid | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .
text-decoration-thickness - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itself
computed valueas specifiedanimation typeby
computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: sol...
text-decoration - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedno
computed valueas each of the properties of the shorthand:text-decoration-line: as specifiedtext-decoration-style: as specifiedtext-decoration-color: computed colortext-decoration-thickness: as specifiedanimation typeas each of the properties of the shorthand:text-decoration-color: a colortext-decoration-style: discretetext-decoration-line: discretetext-decoration-thickness: by
computed value type formal syntax...
text-emphasis-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedno
computed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
text-emphasis-position - CSS: Cascading Style Sheets
formal definition initial valueover rightapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to hide emphasis marks when they conflict with ruby.
text-emphasis-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:text-emphasis-style: nonetext-emphasis-color: currentcolorapplies toall elementsinheritedno
computed valueas each of the properties of the shorthand:text-emphasis-style: as specifiedtext-emphasis-color: computed coloranimation typeas each of the properties of the shorthand:text-emphasis-color: a colortext-emphasis-style: discrete formal syntax <'text-emphasis-style'> | <'text-emphasis-color'> examples a heading with emphasis shape and color this example draws a heading with triangles used to emp...
text-indent - CSS: Cascading Style Sheets
formal definition initial value0applies toblock containersinheritedyespercentagesrefer to the width of the containing block
computed valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc(); formal syntax <length-percentage> && hanging?
text-justify - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-orientation - CSS: Cascading Style Sheets
formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl; text-orientation: upright; } result specifications specification status comment css writing modes module level 3the definition of 'text-orientation' in that specification.
text-overflow - CSS: Cascading Style Sheets
formal definition initial valueclipapplies toblock container elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax [ clip | ellipsis | <string> ]{1,2} examples css p { width: 200px; border: 1px solid; padding: 2px 5px; /* both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-visible { white-space: initial; } .overflow-clip { text-overflow: clip; } .overflow-ellipsis { text-overflow:...
text-rendering - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totext elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | optimizespeed | optimizelegibility | geometricprecision examples automatic application of optimizelegibility this demonstrates how optimizelegibility is used by browsers automatically when the font-size is smaller than 20px.
text-shadow - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valuea color plus three absolute lengthsanimation typea shadow list formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>?
text-size-adjust - CSS: Cascading Style Sheets
formal definition initial valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text font
computed valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification stat...
text-transform - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyes
computed valueas specifiedanimation typediscrete formal syntax none | capitalize | uppercase | lowercase | full-width | full-size-kana examples none <p>initial string <strong>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: none <strong><span>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p> span { text-transform: none; ...
text-underline-offset - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itself
computed valueas specifiedanimation typeby
computed value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it.
text-underline-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax auto | from-font | [ under | [ left | right ] ] examples a simple example let's take a couple of simple example paragraphs: <p class="horizontal">lorem ipsum dolor sit amet, consectetur adipiscing elit.
touch-action - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements except: non-replaced inline elements, table rows, row groups, table columns, and column groupsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | none | [ [ pan-x | pan-left | pan-right ] | [ pan-y | pan-up | pan-down ] | pinch-zoom ] | manipulation examples disabling all gestures the most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate...
transform-origin - CSS: Cascading Style Sheets
the keywords are convenience shorthands and match the following <percentage> values: keyword value left 0% center 50% right 100% top 0% bottom 100% formal definition initial value50% 50% 0applies totransformable elementsinheritednopercentagesrefer to the size of bounding box
computed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample ...
transform-style - CSS: Cascading Style Sheets
formal definition initial valueflatapplies totransformable elementsinheritedno
computed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax flat | preserve-3d examples transform style demonstration in this example we have a 3d cube created using transforms.
transform - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding box
computed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> ...
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background...
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height backgro...
transition-property - CSS: Cascading Style Sheets
formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident> examples there are several examples of css transitions included in the main css transitions article.
transition-timing-function - CSS: Cascading Style Sheets
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform t...
transition - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: easeapplies toall elements, ::before and ::after pseudo-elementsinheritedno
computed valueas each of the properties of the shorthand:transition-delay: as specifiedtransition-duration: as specifiedtransition-property: as specifiedtransition-timing-function: as specifiedanimation typediscrete formal syntax <single-transition>#where <single-transition> = [ none | <single-transition-property> ] | <time> | <timing-function> | <time>where <single-transition-property> = all | <custom-ident>...
unicode-bidi - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, though some values have no effect on non-inline elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status comment css writing modes module...
user-select - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } ...
vertical-align - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itself
computed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a default alignment...
visibility - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toall elementsinheritedyes
computed valueas specifiedanimation typea visibility formal syntax visible | hidden | collapse examples basic example html <p class="visible">the first paragraph is visible.</p> <p class="not-visible">the second paragraph is not visible.</p> <p class="visible">the third paragraph is visible.
white-space - CSS: Cascading Style Sheets
e wrap remove nowrap collapse collapse no wrap remove pre preserve preserve no wrap preserve pre-wrap preserve preserve wrap hang pre-line preserve collapse wrap remove break-spaces preserve preserve wrap wrap formal definition initial valuenormalapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <div id="css-code" class="box"> p { white-space: <select> <option>n...
widows - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax <integer> examples controlling column widows html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
width - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing block
computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels an...
will-change - CSS: Cascading Style Sheets
.slide { will-change: transform; } formal definition initial valueautoapplies toall elementsinheritedno
computed valueas specifiedanimation typediscrete formal syntax auto | <animateable-feature>#where <animateable-feature> = scroll-position | contents | <custom-ident> examples via script this is an example showing how to apply the will-change property through scripting, which is probably what you should be doing in most cases.
word-break - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax normal | break-all | keep-all | break-word examples html <p>1.
word-spacing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyph
computed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification.
writing-mode - CSS: Cascading Style Sheets
formal definition initial valuehorizontal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyes
computed valueas specifiedanimation typediscrete formal syntax horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr examples using multiple writing modes this example demonstrates all of the writing modes, showing each with text in various languages.
z-index - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritedno
computed valueas specifiedanimation typean integercreates stacking contextyes formal syntax auto | <integer> examples visually layering elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; }...
zoom - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritedno
computed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="c...
getter - JavaScript
description sometimes it is desirable to allow access to a property that returns a dynamically
computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls.
JSON.parse() - JavaScript
specifically, the
computed value and all its properties (beginning with the most nested properties and proceeding to the original value itself) are individually run through the reviver.
dominant-baseline - SVG: Scalable Vector Graphics
<text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top default value auto animatable yes auto if this property occurs on a <text> element, then the
computed value depends on the value of the writing-mode attribute.
pathLength - SVG: Scalable Vector Graphics
this value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathlength/(
computed value of path length).
<feFlood> - SVG: Scalable Vector Graphics
working draft removed <icccolor> value from flood-color property and defined that the alpha channel of it gets multiplied with the
computed value of the flood-opacity property.